<template>
	<view class="u-page">
		<view class="header-search">
			<u-search :show-action="false" placeholder="" border-color="#D7D7D7"
			search-icon-color="#3E3E3E" v-model="keyword"
			color="#fff" :clearabled="false" height="50"></u-search>
			<view class="header-filter">
				<text>筛选</text>
				<u-icon size="40" name="chat" class=""></u-icon>
			</view>
		</view>
		<u-dropdown>
			<u-dropdown-item v-model="value1" title="城市" :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="区县" :options="options2"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="乡镇" :options="options2"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="村子" :options="options2"></u-dropdown-item>
		</u-dropdown>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 1,
				value2: 2,
				keyword: "",
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			}
		},
	}
</script>
<style scoped lang="less">
	.u-page{
		.header-search{
			display: flex;
			padding: 13px;
			justify-items: center;
			.u-search{
				flex: 2;
				margin-left: 10px !important;
			}
			.header-filter{
				display: flex;
				margin-left: 10px;
				text-align: center;
				align-items: center;
				uni-text{
					margin-right: 5px;
					color: #0096FF;
				}
			}
		}
	}
</style>